import { Box, Container, Button, Image } from "@chakra-ui/react";
import styled from '@emotion/styled'
import {css} from '@emotion/react'
import { FaSignInAlt, FaSearch } from "react-icons/fa";
import { BsFillPersonFill } from "react-icons/bs";

const logo = css`
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
`

const SignInAndJoin = styled.div`
  height: 52px;
  line-height: 52px;
  border-left: 1px solid #393939;
  border-right: 1px solid #393939;
  padding: 0 6px;
  float: left;
  color: white;
  & > button {
    padding: 0 10px;
  }
  & > button:nth-of-type(1):after {
    content: '';
    width: 1px;
    height: 10px;
    background: #fff;
    position: absolute;
    right: 0;
    top: 15px;
  }
`

const Search = styled.a`
  float: right;
  height: 52px;
  border-left: 1px solid #393939;
  border-right: 1px solid #393939;
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
`

export default function Header () {
  return <Box h="52px" bg="#202020" borderBottom="1px solid #393939">
    <Container h="52px" maxW="1200px" position="relative">
      <SignInAndJoin>
        <Button bg="transparent" leftIcon={<FaSignInAlt/>}>登录</Button>
        <Button bg="transparent" leftIcon={<BsFillPersonFill/>}>注册</Button>
      </SignInAndJoin>
      <Image css={logo} src="/images/logo.png"/>
      <Search>
        <FaSearch/>
      </Search>
    </Container>
  </Box>
}